<template>
	<view class="p-home">
		<view class="p-home-title">
			<uni-card :is-shadow="false" :border="false" :margin="'20rpx'" :spacing="'20rpx 40rpx'" :padding="0">
				<text class="text">房间类型</text>
				<view class="title-input">
				<!-- 	<uni-section class="section">
						<uni-combox :border="false" :candidates="candidates" placeholder="请选择房型"
							v-model="formData.type_name"></uni-combox>
					</uni-section> -->
					<uni-easyinput :clearable="false" type="text" :inputBorder="false" 
						v-model="formData.type_name" placeholder="请输入房型"></uni-easyinput>
					
					<uni-easyinput :clearable="false" type="digit" :inputBorder="false" 
						v-model="formData.price" placeholder="请输入金额"></uni-easyinput>
				</view>
			</uni-card>
		</view>
		<view class="p-home-main">
			<!-- <uni-card title="房型图片" :is-shadow="false" :border="false" :margin="'20rpx'" :spacing="'20rpx 40rpx'"
				:padding="0">
				<view class="picker-up">
					<my-file-picker ref="upOne" return-type="object" v-model="fileLists" :maxSize="maxSize" limit="1"
						title=" " :auto-upload="false" @select="selectClick" @delete="deleteClick"></my-file-picker>
				</view>
			</uni-card> -->
			<uni-card title="房型图片" :is-shadow="false" :border="false" :margin="'20rpx'" :spacing="'20rpx 40rpx'"
				:padding="0">
				<view class="picker-up">
					<my-file-picker ref="upTow" v-model="fileLists1" :maxSize="maxSize" limit="3" title=" "
						:auto-upload="false" @select="selectClick1" @delete="deleteClick1"></my-file-picker>
				</view>
			</uni-card>
	<!-- 		<uni-card title="清洁要求" :is-shadow="false" :border="false" :margin="'20rpx'" :spacing="'20rpx 40rpx'"
				:padding="0">
				<uni-easyinput :clearable="false" type="textarea" class="p-input" :inputBorder="false"
					v-model="formData.clean_requirements" placeholderStyle="font-weight: 300;" placeholder="请输入清洁要求~">
				</uni-easyinput>
			</uni-card> -->
			<uni-card title="清洁要求" :is-shadow="false" :border="false" :margin="'20rpx'" :spacing="'20rpx 40rpx'"
				:padding="0" style="display: block!important;">
				<view class="text1">
					<text class="text2">{{data || ''}}</text>
				</view>
				<uni-easyinput :clearable="false" type="textarea" class="p-input" :inputBorder="false"
					v-model="formData.clean_requirements" placeholderStyle="font-weight: 300;" placeholder="请输入清洁要求~">
				</uni-easyinput>
			</uni-card>
			
		</view>
		<view class="butt">
			<button v-if="id" class="but but1" type="default" @click="delClick(id)">删除</button>
			<button class="but" type="default" @click="save">保存</button>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				imgUrl: `${getApp().globalData.imgScr}jd/xiangji.png`,
				id: '',
				formData: {
					type_name: '', // 房型名称
					room_type_image: '', // 房型图片
					room_type_images: [], // 清洁标准
					cleanliness_standard: '', // 清洁标准
					price: '', // 房型价钱
					clean_requirements: '', // 清洁要求
				},
				candidates: ['大床房', '标准间', '三人间', '豪华套间'], // 房型的待选数据
				fileImg: '', // 图片上传 回显的数据
				maxSize: 1024 * 1024 * 10, // 限制文件上传大小
				data: '',
				fileLists: {
					// url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b7c7f970-517d-11eb-97b7-0dc4655d6e68.jpg',
				},
				fileLists1: [
					// 	{
					// 	url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b7c7f970-517d-11eb-97b7-0dc4655d6e68.jpg',
					// },
				]
			};
		},
		onLoad(option) {
			let _this = this
			console.log('获取id', option.id)
			if (option.id) {
				this.id = option.id
				this.$http.get('/index/Hotelindex/room_type_info', {
					room_type_id: option.id
				}).
				then(function(res) {
					//这里只会在接口是成功状态返回
					_this.formData = res
					if(res.cleanliness_standard.length > 0){
							_this.formData.room_type_images = res.cleanliness_standard
					}else{
						_this.formData.room_type_images = []
					}
				
					_this.fileImg = res.room_type_image[0]
					_this.fileLists = {
						url: res.room_type_image[0]
					}
					if (res.cleanliness_standard.length != '' && res.cleanliness_standard.length > 0) _this
						.fileLists1 = res.cleanliness_standard.map(item => {
							return {
								url: item
							}
						})
				}).catch(function(e) {
					//这里只会在接口是失败状态返回，不需要去处理错误提示
					uni.showToast({
						title: e.errMsg,
						icon: "none"
					})
				});
			}
			this.getClick()
		},
		onReady() {
			let _this = this
			uni.setNavigationBarTitle({
				title: _this.id ? '修改房型' : '添加房型'
			});
		},
		methods: {
			/**
			 * 单图上传
			 */
			async selectClick(e) {
				try {
					let url = await this.uploadFile(e.tempFilePaths[0])
					this.fileLists = {
						url: e.tempFilePaths[0]
					}
					this.formData.room_type_image = url
				} catch (e) {
					//TODO handle the exception
					console.log('错误地址', e)
				}
			},
			/**
			 * 单图删除
			 */
			deleteClick(e) {
				console.log('单图删除', e);
				this.formData.room_type_image = ''
			},
			/**
			 * 多图上传
			 */
			async selectClick1(e) {
				let _this = this

				try {
					for (const item of e.tempFiles) {

						let urls = await _this.uploadFile(item.url)
						this.fileLists1.push({
							url: item.url
						})
						console.log(urls);
						this.formData.room_type_images.push(urls)
					}
				} catch (e) {
					//TODO handle the exception
					console.log('错误地址1', e)
				}
			},

			/**
			 * 多图删除
			 */
			deleteClick1(e) {
				console.log('多图删除', e);
				this.formData.room_type_images.splice(e.index, 1)
			},

			/**
			 * 确定添加房型按钮
			 * 将当前页面的数据传输给云函数 进行添加数据
			 */
			async save() {
				let _this = this
				let title = ''
				if (this.formData.type_name == '') title = '房型不能为空！'
				else if (this.formData.price == '') title = '房型单价不能为空！'
				// else if (this.formData.room_type_image == '') title = '房型图片不能为空！'
				//else if(this.formData.room_type_images.length <1) title = '房型图片不能为空！'
				else {
					try {
						this.formData.cleanliness_standard = ''
						if (this.formData.room_type_images.length > 0) this.formData.cleanliness_standard = this
							.formData.room_type_images.join('|')
						if (Array.isArray(this.formData.cleanliness_standard) && this.formData.cleanliness_standard
							.length > 0) this.formData.cleanliness_standard.join('|')
						delete this.formData.room_type_images
						if (this.formData.id) {
							if (Array.isArray(_this.formData.room_type_image) && _this.formData.room_type_image
								.length > 0) _this.formData.room_type_image = _this.formData.room_type_image[0]

							let res = await _this.$http.post('/index/Hotelindex/edit_room_type', _this.formData)
						} else {

							let res = await _this.$http.post('/index/Hotelindex/add_room_type', _this.formData)
						}

						uni.navigateBack({
							delta: 1
						});
					} catch (e) {
						uni.showToast({
							title: e.errMsg,
							icon: "none"
						})
					}
				}
				if (title != '') {
					uni.showToast({
						title: title,
						icon: "none"
					})
				}

			},

			/**
			 * 删除房型
			 * @param {string} id 房型id
			 */
			async delClick(id) {
				let _this = this;
				try {
					let reo = await uni.showModal({
						title: '提示',
						content: '确定删除当前房型？',
					})
					if (reo[1].confirm) {
						let res = await this.$http.post('/index/Hotelindex/del_room_type', {
							id
						})
						uni.switchTab({
							url: '/pages/tag/home/home'
						});
					} else if (res[1].cancel) {
						return uni.showToast({
							title: "已取消",
							icon: "none"
						})
					}
					// this.listData = rei
				} catch (e) {
					uni.showToast({
						title: e.errMsg,
						icon: "none"
					})
				}
			},

			/**
			 * 请求数据
			 */
			async getClick() {
				let _this = this
				try {
					let rep = await this.$http.post('/index/Communal/config_data', {
						config_id: 6,
					})
					this.data = rep.cleaner_rule.value
				} catch (e) {
					uni.showToast({
						title: e.errMsg,
						icon: "none"
					})
				}

			},

			/**
			 * 图片上传
			 */
			uploadFile(url) {
				return new Promise(function(resolve, reject) {
					uni.uploadFile({
						url: `${getApp().globalData.url}index/hotelindex/uploadImage`, //仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						header: {
							"Content-Type": "multipart/form-data",
						},
						success: (uploadFileRes) => {
							console.log('上传地址1', JSON.parse(uploadFileRes.data).file)
							// 根据接口具体返回格式   赋值具体对应url
							resolve(JSON.parse(uploadFileRes.data).file)
						},
						fail: (e) => {
							reject(e)
							// uni.showToast({
							// 	title: e.errMsg,
							// 	icon:"none"
							// })
						}
					});
				})
			}
		}
	}
</script>
<style lang="scss">
	.uni-card .uni-card__header .uni-card__header-content {
	  justify-content: flex-start!important;
	
	}
	.p-home-title{
		.uni-card {
			border-radius: 20rpx;
			overflow: visible;
		
			.uni-card__content {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}
	}
	.p-home {
		display: flex;
		flex-direction: column;
		overflow: visible;
		height: 100vh;

		.uni-card {
			border-radius: 20rpx;
			overflow: visible;

			.uni-card__content {
			
				justify-content: space-between;
				align-items: center;
			}

			.title-input {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				margin-left: 80rpx;

				.input {
					flex: 1;

					.uni-easyinput__content-input {
						text-align: right;
						padding: 0 !important;
					}
				}
			}

			.p-input {
				width: 100%;
			}

			.text {
				line-height: 48rpx;
				font-size: 28rpx;
				font-weight: 600;
				color: #000000;
			}

			.text1 {
				display: flex;
				flex-direction: column;
				min-height: 200rpx;

				.text2 {
					line-height: 60rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: rgba($color: #000000, $alpha: 0.7);
				}
			}

			.uni-section {
				margin: 0;
			}

			.section {
				width: 240rpx;
				z-index: 999;

				.uni-combox {
					padding: 12rpx 0;
				}

				.uni-section-header {
					display: none;
				}

				.uni-combox__input {
					text-align: right;
					padding-right: 10rpx;
				}
			}
		}

		.p-home-main {
			flex: 1;
			margin-bottom: 60rpx;
			overflow: auto;
			margin-top: -20rpx;

			.img {
				width: 100%;
				padding: 20rpx 0;
			}

			.img-box {
				width: 142rpx;
				height: 142rpx;
				border: 0;
				background-color: #F5F7FD;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}

			.main-img {
				width: 100rpx;
				height: 100rpx;
				margin: 10rpx 0;
			}

			.main-text {
				font-size: 24rpx;
				color: rgba($color: #000000, $alpha: 0.4);
			}

			::v-deep .picker-up {
				width: 100%;
				padding: 20rpx 0;

				.uni-file-picker {
					display: flex;
					flex-direction: row-reverse;
					justify-content: space-between;
				}

				.file-picker__box {
					width: 164rpx !important;
					height: 164rpx !important;
					padding-top: 10rpx;
				}

				.icon-del-box {
					width: 38rpx;
					height: 38rpx;

					.icon-del {
						width: 22rpx;
					}
				}

				.icon-add {
					width: 60rpx;
					height: 6rpx;
				}
			}
		}

		.butt {
			position: sticky;
			bottom: 40rpx;
			left: 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			width: 100%;
			padding: 0 20rpx;

			.but {
				flex: 1;
				line-height: 80rpx;
				border-radius: 40rpx;
				background: linear-gradient(-90deg, #8dc9f1, #d8eefc);
				font-size: 32rpx;
				color: #FFFFFF;
			}

			.but1 {
				background: linear-gradient(-90deg, #FF4B4B, #DA4D21);
				margin-right: 32rpx;
			}
		}
	}
</style>
